<script>
import { mapState } from 'vuex';

import BaseVeiw from '../View';
import topoUtil from '@/utils/topo/topo-util';

export default {
    name: 'ViewCanvas',
    extends: BaseVeiw,
    computed: {
        ...mapState({
            mqttData: (state) => state.topoEditor.mqttData,
        }),
        dataInit: function () {
            if (Object.keys(this.mqttData).length !== 0) {
                const type = Number(this.$route.query.type);
                let bindNum = this.detail.dataBind.serialNumber;
                let mqttNum = this.mqttData.serialNumber;
                if (type === 1) {
                    bindNum = this.$route.query.serialNumber;
                }
                if (type === 2) {
                    if (this.detail.dataBind.variableType && this.detail.dataBind.variableType !== 1) {
                        bindNum = this.detail.dataBind.sceneModelDeviceId;
                        mqttNum = this.mqttData.sceneModelDeviceId;
                    }
                }
                if (bindNum && bindNum === mqttNum && this.detail.dataBind.identifier) {
                    for (let i = 0; i < this.mqttData.message.length; i++) {
                        if (this.detail.dataBind.identifier == this.mqttData.message[i].id) {
                            let val = this.mqttData.message[i].value;
                            this.setColor(val);
                        }
                    }
                }
            }
        },
    },
    watch: {
        detail: {
            handler(newVal, oldVal) {
                this.onResize();
            },
            deep: true,
        },
        dataInit: {},
    },
    mounted() {
        if (!this.editMode) {
            this.initValue();
        }
    },
    data() {
        return {
            defaultColor: this.detail.style.foreColor,
        };
    },
    methods: {
        getForeColor() {
            var foreColor = this.detail.style.foreColor;
            if (foreColor == undefined || foreColor === '') {
                return 'grey';
            } else if (foreColor.startsWith('#')) {
                return this.hex2rgba(foreColor);
            } else {
                return foreColor;
            }
        },
        hex2rgba(hex) {
            //颜色转换
            // hex格式如#ffffff
            let colorArr = [];
            for (let i = 1; i < 7; i += 2) {
                colorArr.push(parseInt('0x' + hex.slice(i, i + 2))); // 16进制值转10进制
            }
            var alpha = parseInt('0x' + hex.slice(7, 9)) / 255; // 16进制值转10进制
            return `rgba(${colorArr.join(',')},${alpha})`;
        },
        inRange(x, y, points) {
            //边界检测-只能检测凸边形（检测点在不在多边形里面）
            // points表示多边形的顶点集合
            let inside = false;
            for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
                let xi = points[i][0],
                    yi = points[i][1];
                let xj = points[j][0],
                    yj = points[j][1];
                let intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
                if (intersect) inside = !inside;
            }
            return inside;
        },
        // 设置初始值
        initValue() {
            let value = !this.detail.dataBind.modelValue ? 0 : this.detail.dataBind.modelValue;
            this.setColor(value);
        },
        // 设置颜色
        setColor(val) {
            const { stateList } = this.detail.dataBind || {};
            if (stateList && stateList.length !== 0) {
                const stateItem = stateList.find((item) => topoUtil.judgeSize(item.paramCondition, val, item.paramData));
                if (stateItem) {
                    this.detail.style.foreColor = stateItem.foreColor;
                } else {
                    this.detail.style.foreColor = this.defaultColor;
                }
            }
        },
    },
};
</script>
